<template>
  <div class="prediction-warning">
    <!-- 内容区域 -->
    <div class="content-container">
      <!-- 主要内容区 -->
      <div class="main-content">
        <!-- 左侧图表区 -->
        <div class="charts-section">
          <dv-border-box12>
            <div class="chart-card">
              <div class="chart-header">
                <div class="card-title">水位预测趋势</div>
                <div class="time-buttons">
                  <button 
                    v-for="range in timeRanges" 
                    :key="range"
                    :class="{ active: predictionTimeRange === range }"
                    @click="predictionTimeRange = range"
                  >
                    {{ range }}天
                  </button>
                </div>
              </div>
              <div class="chart-content">
                <WaterLevelChart :days="predictionTimeRange" />
              </div>
            </div>
          </dv-border-box12>
          <dv-border-box12>
            <div class="chart-card">
              <div class="chart-header">
                <div class="card-title">水质预测趋势</div>
                <div class="time-buttons">
                  <button 
                    v-for="range in timeRanges" 
                    :key="range"
                    :class="{ active: predictionTimeRange === range }"
                    @click="predictionTimeRange = range"
                  >
                    {{ range }}天
                  </button>
                </div>
              </div>
              <div class="chart-content">
                <WaterQualityChart :days="predictionTimeRange" />
              </div>
            </div>
          </dv-border-box12>
          <dv-border-box12>
            <div class="chart-card">
              <div class="card-title">实时观测</div>
              <div class="observation-content">
                <img src="@/assets/images/observation.jpg" alt="实时观测" class="observation-image" />
                <div class="observation-info">
                  <div class="info-item">
                    <span class="label">观测时间：</span>
                    <span class="value">{{ currentTime }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">观测地点：</span>
                    <span class="value">海河干流监测站</span>
                  </div>
                </div>
              </div>
            </div>
          </dv-border-box12>
        </div>

        <!-- 中间地图区域 -->
        <div class="map-section">
          <dv-border-box8 class="map-content">
            <Map class="map" />
          </dv-border-box8>
        </div>

        <!-- 右侧预警信息区 -->
        <ContainerPanel1 title="异常警报" style="height:100%;" class="warning-panel">
          <template #default>
            <!-- 统计内容 -->
            <div class="warning-stats-row">
              <div class="stat-item">
                <dv-decoration-9 style="width:110px;height:110px;">
                  <div class="dv-dec9-text">
                    <div class="stat-value">{{ warningStatsRow.abnormal }}</div>
                    <div class="stat-label">异常测点</div>
                  </div>
                </dv-decoration-9>
              </div>
              <div class="stat-item">
                <dv-decoration-9 style="width:110px;height:110px;">
                  <div class="dv-dec9-text">
                    <div class="stat-value">{{ warningStatsRow.normalRate }}%</div>
                    <div class="stat-label">正常率</div>
                  </div>
                </dv-decoration-9>
              </div>
              <div class="stat-item">
                <dv-decoration-9 style="width:110px;height:110px;">
                  <div class="dv-dec9-text">
                    <div class="stat-value">{{ warningStatsRow.normal }}</div>
                    <div class="stat-label">正常测点</div>
                  </div>
                </dv-decoration-9>
              </div>
            </div>
            <!-- 预警信息表格 -->
            <div class="warning-table-container">
              <dv-scroll-board :config="scrollBoardConfig" style="width:100%;height:286px" />
            </div>
            <!-- 环状图统计区域 -->
            <div class="warning-pie-container">
              <div class="pie-title">预警信息统计</div>
              <div class="pie-chart-wrapper">
                <dv-active-ring-chart :config="ringConfig" style="width:300px;height:300px" />
              </div>
            </div>
          </template>
        </ContainerPanel1>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import WaterLevelChart from '@/components/WaterLevelChart.vue'
import WaterQualityChart from '@/components/WaterQualityChart.vue'
import * as echarts from 'echarts'
import ContainerPanel1 from '@/components/ContainerPanel1.vue'
import Map from '@/components/Map.vue'

// 预测时间范围选项
const timeRanges = [3, 7, 15]
const predictionTimeRange = ref(7)

// 当前时间
const currentTime = ref(new Date().toLocaleString())

// 更新当前时间
const updateTime = () => {
  currentTime.value = new Date().toLocaleString()
}

onMounted(() => {
  // 每秒更新一次时间
  setInterval(updateTime, 1000)
  // 渲染环状图
  const chartDom = document.getElementById('warning-pie-chart')
  if (chartDom) {
    const myChart = echarts.init(chartDom)
    myChart.setOption({
      tooltip: { trigger: 'item' },
      legend: { bottom: 0 },
      series: [
        {
          name: '风险等级统计',
          type: 'pie',
          radius: ['60%', '80%'],
          avoidLabelOverlap: false,
          label: { show: true, position: 'outside', formatter: '{b}: {c}' },
          labelLine: { show: true },
          data: pieData.value
        }
      ]
    })
  }
})

// 预警信息列表
const warningList = ref([
    {
        level: '红色',
        time: '2024-03-20 14:30',
        location: '海河干流',
        description: '水位超过警戒线，预计未来3小时可能发生洪水',
        type: '水位异常'
    },
    {
        level: '橙色',
        time: '2024-03-20 13:15',
        location: '子牙河',
        description: '水质指标异常，需要密切关注',
        type: '水质异常'
    },
    {
        level: '黄色',
        time: '2024-03-20 12:00',
        location: '北运河',
        description: '水位接近警戒线，建议加强监测',
        type: '水位预警'
    }
])

// 统计数据
const warningStatsRow = ref({
    abnormal: 2,
    normalRate: 96.5,
    normal: 55
})

// 预警信息表格数据
const warningTableData = ref([
    { location: '海河干流', time: '2024-03-20 14:30', level: '红色', type: '水位异常' },
    { location: '子牙河', time: '2024-03-20 13:15', level: '橙色', type: '水质异常' },
    { location: '北运河', time: '2024-03-20 12:00', level: '黄色', type: '水位预警' },
    { location: '南运河', time: '2024-03-20 11:00', level: '蓝色', type: '水质预警' },
    { location: '永定河', time: '2024-03-20 10:00', level: '黄色', type: '水位预警' },
    { location: '潮白河', time: '2024-03-20 09:00', level: '橙色', type: '水质异常' },
    { location: '大清河', time: '2024-03-20 08:00', level: '红色', type: '水位异常' },
    { location: '海河干流', time: '2024-03-19 14:30', level: '红色', type: '水位异常' },
    { location: '子牙河', time: '2024-03-19 13:15', level: '橙色', type: '水质异常' },
    { location: '北运河', time: '2024-03-19 12:00', level: '黄色', type: '水位预警' },
    { location: '南运河', time: '2024-03-19 11:00', level: '蓝色', type: '水质预警' },
    { location: '永定河', time: '2024-03-19 10:00', level: '黄色', type: '水位预警' },
    { location: '潮白河', time: '2024-03-19 09:00', level: '橙色', type: '水质异常' },
    { location: '大清河', time: '2024-03-19 08:00', level: '红色', type: '水位异常' },
    { location: '海河干流', time: '2024-03-18 14:30', level: '红色', type: '水位异常' },
    { location: '子牙河', time: '2024-03-18 13:15', level: '橙色', type: '水质异常' },
    { location: '北运河', time: '2024-03-18 12:00', level: '黄色', type: '水位预警' },
    { location: '南运河', time: '2024-03-18 11:00', level: '蓝色', type: '水质预警' },
    { location: '永定河', time: '2024-03-18 10:00', level: '黄色', type: '水位预警' },
    { location: '潮白河', time: '2024-03-18 09:00', level: '橙色', type: '水质异常' },
    { location: '大清河', time: '2024-03-18 08:00', level: '红色', type: '水位异常' }
])

// 显示预警详情
const showWarningDetail = (warning) => {
    console.log('显示预警详情:', warning)
    // 这里可以添加显示详情的逻辑
}

// 统计风险等级数量
const pieData = computed(() => {
  const levelMap = { '红色': 0, '橙色': 0, '黄色': 0, '蓝色': 0 }
  warningTableData.value.forEach(row => {
    if (levelMap[row.level] !== undefined) levelMap[row.level]++
  })
  return [
    { value: levelMap['红色'], name: '红色', itemStyle: { color: '#ff4d4f' } },
    { value: levelMap['橙色'], name: '橙色', itemStyle: { color: '#faad14' } },
    { value: levelMap['黄色'], name: '黄色', itemStyle: { color: '#fadc19' } },
    { value: levelMap['蓝色'], name: '蓝色', itemStyle: { color: '#1890ff' } },
  ]
})

// 滚动板配置
const scrollBoardConfig = computed(() => ({
  header: ['地点', '时间', '风险等级', '预警类型'],
  data: warningTableData.value.map(row => [row.location, row.time, row.level, row.type]),
  rowNum: 8,
  headerBGC: '#00BAFF',
  oddRowBGC: '#003B51',
  evenRowBGC: '#0A2732',
  textStyle: { color: '#fff', fontSize: 18 },
  align: ['center', 'center', 'center', 'center'],
  columnWidth: [100, 180, 100, 120],
  waitTime: 2000,
  headerHeight: 57,
  carousel: 'single',
  hoverPause: true
}))

// 环状图配置
const ringConfig = computed(() => {
  const levelMap = { '红色': 0, '橙色': 0, '黄色': 0, '蓝色': 0 };
  warningTableData.value.forEach(row => {
    if (levelMap[row.level] !== undefined) levelMap[row.level]++;
  });
  return {
    data: [
      { name: '红色', value: levelMap['红色'] },
      { name: '橙色', value: levelMap['橙色'] },
      { name: '黄色', value: levelMap['黄色'] },
      { name: '蓝色', value: levelMap['蓝色'] }
    ],
    color: ['#ff4d4f', '#faad14', '#fadc19', '#1890ff'],
    radius: '60%',
    activeRadius: '65%',
    lineWidth: 20,
    digitalFlopStyle: { fontSize: 22, fill: '#fff' },
    animationCurve: 'easeOutCubic',
    animationFrame: 50
  };
});
</script>

<style lang="scss" scoped>
.prediction-warning {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.content-container {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  gap: 20px;
}

.main-content {
  flex: 1;
  display: flex;
  height: 100%;
  position: relative;
  justify-content: space-between;
  gap: 20px;
}

.charts-section {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  
  :deep(.dv-border-box12) {
    width: 100%;
    height: calc(33.33% - 7px);
    
    .border-box-content {
      width: 100%;
      height: 100%;
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
  }
}

.map-section {
  flex: 1;
  height: 100%;
  position: relative;
  
  :deep(.dv-border-box8) {
    width: 100%;
    height: 100%;
  }
}

.warning-panel {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  :deep(.container-panel) {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }
  
  :deep(.dv-border-box12) {
    width: 100%;
    height: 100%;
    
    .border-box-content {
      width: 100%;
      height: 100%;
      padding: 15px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
  }
  
  .warning-stats-row {
    height: 14.3%;
    margin-bottom: 20px;
  }
  
  .warning-table-container {
    height: 42.85%;
    margin: 10px 0;
    overflow: hidden;
    
    :deep(.dv-scroll-board) {
      height: 100%;
      
      .header {
        background-color: #00BAFF !important;
      }
      
      .row-item {
        background-color: #003B51 !important;
        
        &:nth-child(even) {
          background-color: #0A2732 !important;
        }
      }
      
      .scroll-board {
        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }
        
        &::-webkit-scrollbar-thumb {
          background: rgba(0, 194, 255, 0.3);
          border-radius: 3px;
        }
        
        &::-webkit-scrollbar-track {
          background: rgba(0, 24, 48, 0.3);
          border-radius: 3px;
        }
      }
    }
  }
  
  .warning-pie-container {
    height: 42.85%;
    margin-top: 10px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    
    .pie-title {
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 16px;
      color: #00c2ff;
      font-weight: bold;
      z-index: 10;
      writing-mode: vertical-lr;
      letter-spacing: 2px;
    }
    
    .pie-chart-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      
      :deep(.dv-active-ring-chart) {
        width: 260px !important;
        height: 260px !important;
      }
    }
  }
}

:deep(.dv-border-box12) {
  .border-box-content {
    background: unset !important;
    border-radius: unset !important;
    backdrop-filter: unset !important;
  }
  
  .dv-border-svg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  .border-box-content {
    position: relative;
    z-index: 2;
  }
}

.warning-section {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px; // 添加底部内边距
  box-sizing: border-box;
  overflow-y: auto; // 允许内容滚动

  :deep(.dv-border-box12) {
    width: 100%;
    height: 100%;
    
    .border-box-content {
      width: 100%;
      height: 100%;
      padding: 30px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      background: unset !important;
      border-radius: unset !important;
      backdrop-filter: unset !important;
    }
  }

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #00c2ff;
    text-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
    letter-spacing: 2px;
    justify-content: flex-start;
  }

  .stats-container {
    width: 100%;
    height: 120px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
  }

  .warning-stats-row {
    width: 100%;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center;
    margin-bottom: 30px;
  }

  .warning-table-container {
    flex: unset;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 10px;
    margin-bottom: 25px;
    height: 286px;
    overflow: hidden;
  }
  .warning-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
  }
  .warning-table th, .warning-table td {
    padding: 12px 8px;
    text-align: center;
    font-size: 18px;
    line-height: 40px;
  }
  .warning-table th {
    color: #00c2ff;
    font-weight: bold;
    font-size: 20px;
  }
  .warning-table tbody tr:nth-child(odd) {
    background: #e6f7ff;
  }
  .warning-table tbody tr:nth-child(even) {
    background: #b5d6f6;
  }

  /* 环状图区域 */
  .warning-pie-container {
    height: 25%;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 10px;
    background: transparent;
    width: 100%;
    text-align: center;
  }

  .warning-pie-container :deep(.dv-active-ring-chart) {
    margin: 0 auto;
  }

  .pie-title {
    position: absolute;
    top: 0;
    left: 10px;
    font-size: 16px;
    color: #00c2ff;
    font-weight: bold;
    z-index: 10;
  }
}

.warning-panel {
  width: 25%;
  min-width: 340px;
  max-width: 420px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.warning-table-container {
  flex: unset;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-top: 10px;
  margin-bottom: 25px;
  height: 286px;
  overflow: hidden;
}

.warning-stats-row {
  width: 100%;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center;
  margin-bottom: 30px;
}

.stat-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33%;
}
.dv-dec9-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}
.stat-label {
  font-size: 14px;
  color: #00c2ff;
  margin-top: 5px;
}

.pie-chart-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 5px;
    
    .card-title {
      color: #00c2ff;
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
    }
  }
  
  .chart-content {
    flex: 1;
    min-height: 0;
    position: relative;
    padding: 10px;
  }
}

.observation-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 10px;
  
  .observation-image {
    width: 100%;
    height: calc(100% - 60px);
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid rgba(0, 194, 255, 0.3);
    background-color: rgba(0, 0, 0, 0.2);
  }
  
  .observation-info {
    height: 60px;
    padding: 10px;
  }
}
</style> 